<template>
    <div class="flex-main">
        <div class="flex-body">
            <img :src="adPic.plug_ad_pic" alt="" width="100%">
            <ul class="m-form">
                <li class="m-form-item">
                    <span class="m-form-tit">手机</span>
                    <input type="number" name="" v-model="telphone" id="" class="m-form-ipt ml" placeholder="请输入手机号码">
                    <button class="m-sendcode" @click="sendmsgEvent" v-if="!isSend">发送验证码</button>
                    <button class="m-sendcode" style="padding-left:0.2rem;padding-right:0.2rem;" v-else>重新发送({{downtime}})</button>
                </li>
                <li class="m-form-item">
                    <span class="m-form-tit">验证码</span>
                    <input type="text" name="" id="" v-model="wxcode" class="m-form-ipt ml" placeholder="请输入验证码">
                </li>
                <li class="m-form-item" v-if="isNewUser">
                    <span class="m-form-tit">门店</span>
                    <input type="text" name="" v-model="shopValue.Shop" id="" class="m-form-ipt ml" @click="getShoplist" readonly>
                </li>
                <li class="m-form-item" v-if="isNewUser">
                    <span class="m-form-tit">用户名</span>
                    <input type="text" name="" id="" v-model="username" class="m-form-ipt ml" placeholder="请输入用户名">
                </li>
            </ul>
            
        </div>
        <div class="flex-bottom">
            <div class="m-bottom-btn">
                <button @click="login">注册并登录</button>
            </div>
        </div>

        <mt-popup
        v-model="shopVisible"
        position="bottom" style="width:100%;">
         <mt-picker :slots="shopSlots" :valueKey="'Shop'" @change="onValuesChange"></mt-picker>
        </mt-popup>
        
    </div>
</template>
<script>
import {codeLogin,sendMsg,verifyMobile,getShopList,indexBanner,bindTel} from '@/api/views';
import {checkMobile} from '@/utils/utils';
import { clearInterval } from 'timers';
import {mapState,mapMutations,mapActions} from 'vuex';
export default {
    name:'',
    data() {
        return {
            telphone:'',
            username:'',
            isSend:false,       //是否发送验证码
            downtime:60,    //倒计时
            isNewUser:false,        //是否新会员
            shopVisible:false,      //是否选择门店
            shopSlots:[],
            shopValue:{id:''},
            adPic:'',
            wxcode:'',
            openid:'',
            access_token:'',
            user:'',        //openid session_token
        }
    },
    computed: {
        ...mapState({
            'm_openid':state=>state.user.m_openid,
            'm_token':state=>state.user.m_token,
            'm_uid':state=>state.user.m_uid,
        })
    },
    methods: {
        ...mapActions(['actionOpenid', 'actionToken','actionUid']),
        ...mapMutations(['SET_TOKEN','SET_OPENID','SET_UID']),
        // 发送验证码
        sendmsgEvent() {
            let telphone = this.telphone;
            let downtime = this.downtime;
            if(telphone=='' || !checkMobile(telphone)){
                this.$toast('请填写正确的手机号码');
                return false;
            }
            sendMsg({
                telphone:telphone
            }).then(result=>{
                this.isSend = true;
                let downtime = this.downtime;
                setInterval(() => {     //重发倒计时
                    if(downtime>0){
                        downtime--;
                    }else{
                        clearInterval();
                        this.isSend = false;
                    }
                    this.downtime = downtime;
                }, 1000);
                verifyMobile({
                    telphone:telphone
                }).then(result=>{
                    //- 手机号未注册(新用户)
                    if (result.code == 2) {
                        //- 检测到是新会员，需填写会员名称，必填，需选择门店信息
                        this.isNewUser=true

                        //- 获取门店信息
                        this.getLoginShop();
                    }
                }).catch(error=>{
                    
                })
            })
        },
        // 点击门店显示选择
        getShoplist() {
            this.shopVisible=true;
            
        },
        // 获取门店名称
        getLoginShop() {
            getShopList().then(result=>{
                this.shopValue = result.list[0];
                this.shopSlots = [{
                    flex: 1,
                    values: result.list,
                    className: 'slot1',
                    textAlign: 'center'
                }]
            })
        },
        // 选择对应门店
        onValuesChange(picker,values) {
            this.shopValue = values[0];
        },
        // 登录
        login () {
            let telphone = this.telphone;
            let username = this.username;
            if(telphone=='' || !checkMobile(telphone)){
                this.$toast('请输入正确的手机号码');
                return false;
            }
            let param = {
                telphone:telphone,
                username : this.username,
                code:this.wxcode,
                openid:this.m_openid,
                access_token:this.m_token,     //
                shopid:this.shopValue?this.shopValue.id:'',   //门店id
                superiorid:'',      //介绍人id
            }
            bindTel(param).then(result=>{
                let userinfo = result;
                this.actionUid(result.uid);      //用户信息存入store
                this.$utils.uid = result.uid;
                this.$router.replace({      //跳转到首页
                    name: 'index'
                });
            })
        }
    },
    mounted() {
        // 获取广告图
        indexBanner({
            flag: 'register'
        }).then(result=>{
            this.adPic = result.list[0];
        })
        
    },
    created() {
        //- 通过code换取网页授权access_token和openid
        let code = this.$route.query.code;
        let superiorid = this.$route.query.superiorid || '';        //分享上级id
        if(code){
             //- 如果能够获取到，则代表此时页面是授权之后重定向之后跳转的页面
            codeLogin({
                 code: code, 
                 superiorid: superiorid 
             }).then(result=>{
                 console.log(result);
                 let user = result.user;
                 this.SET_OPENID(user.Openid);
                 this.SET_TOKEN(user.access_token);
                 if(user.uid){      //已授权注册过，存在uid，直接存入store和sessionStorage，改变utils里面的uid
                    this.$utils.uid = user.uid;
                    this.SET_UID(user.uid);
                    this.$toast('用户已注册');
                    setTimeout(() => {
                        this.$router.push({name:'index'});
                    }, 500);
                 }
             })
        }
    }
}
</script>
<style lang="less" scoped>
.m-form{
    margin: 0;
    .m-form-tit{
        text-align: justify;
        margin-top: 2.2rem;
        &::after{
            content: '';
            display: inline-block;
            width: 100%;
            height: 0;
        }
    }
    .m-form-item{
        margin-bottom: 1px;
        .m-sendcode{
            border: 1px solid @primary-red;
            color: @primary-red;
            .border-radius(6px);
            padding: .4rem .8rem;
        }
    }
}
</style>
